import { Layout, Menu} from 'antd';
import React, { Component } from 'react';
import From from './header.jsx';
import Table from './table.jsx'
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import tsIcon from '../static/logo.png';
import 'antd/dist/antd.css';
import './test.scss';

const { Header, Sider } = Layout;
const { SubMenu } = Menu;
const nameList = ['用户名', '地址'];
export default class SiderDemo extends Component {
  msg: "";
  state = {
    collapsed: false,
  };
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };
  tomsg = msg => {
    console.log('msg', msg);
    this.refs.table.getData(msg);
  }

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }} className="home">
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" >
            <img src={tsIcon} className="logoImg" alt="" />
            {
              !collapsed?<p className="logoSpan">舒&栈</p>:''
            }
          </div>
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background bgHeader" style={{ padding: 0 }} >
            <p>user / blie</p>
          </Header>
          <div className = "test-contain">
            <div className="test-top">
              <From tomsg={this.tomsg.bind(this)} name={nameList}></From>
            </div>
            <div className="test-bottom">
              <Table ref="table"></Table>
            </div>
          </div>
        </Layout>
      </Layout>
    );
  }
}
